<div class="grid gap-6 m:grid-cols-2">
  <div class="grid gap-6">
    <% if account.class.name == "User" %>
      <% account.setting.brand_color1 = user_colors(account)[:bg] if account.setting && account.setting.brand_color1.blank? %>
    <% else %>
      <% account.bg_color_hex = user_colors(account)[:bg] if account.bg_color_hex.blank? %>
      <% account.text_color_hex = user_colors(account)[:text] if account.text_color_hex.blank? %>
    <% end %>
    <div class="crayons-field">
      <%= f.label :bg_color_hex, t("views.logo.color_1.label"), class: "crayons-field__label" %>
      <p id="color-1-description" class="crayons-field__description"><%= t("views.logo.color_1.description") %></p>
      <div class="flex items-center">
        <%= f.text_field :bg_color_hex, placeholder: "#000000", class: "crayons-textfield mr-2", data: { color_picker: "true", label_text: t("views.logo.color_1.label") }, aria: { describedby: "color-1-description" } %>
      </div>
    </div>

    <div class="crayons-field">
      <% if account.class.name == "User" %>
        <% account.setting.brand_color1 = user_colors(account)[:text] if account.setting %>
      <% else %>
        <% account.bg_color_hex = user_colors(account)[:text] if account.text_color_hex.blank? %>
      <% end %>
      <%= f.label :text_color_hex, t("views.logo.color_2.label"), class: "crayons-field__label" %>
      <p id="color-2-description" class="crayons-field__description"><%= t("views.logo.color_2.description_html") %></p>
      <div class="flex items-center">
        <%= f.text_field :text_color_hex, placeholder: "#ffffff", class: "crayons-textfield mr-2", data: { color_picker: "true", label_text: t("views.logo.color_2.label") }, aria: { describedby: "color-2-description" } %>
      </div>
    </div>
  </div>

  <div class="crayons-card crayons-card--secondary flex-1 p-6">
    <p class="text-uppercase color-base-50 mb-4 fs-s ff-monospace"><%= t("views.logo.preview.text") %></p>
    <%= inline_svg_tag("preview-logo.svg", id: "color-select-preview-logo", class: "p-4 radius-default", title: t("views.logo.preview.icon")) %>
  </div>
</div>
<%= javascript_include_tag "enhanceColorPickers", defer: true %>
